<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>free2027295270书城注册页面</title>

    <%--静态包含base标签，css样式,jQuery文件--%>
    <%@ include file="/common/head.jsp"%>
    <script>
        //页面加载完成之后
        $(function () {
            //给注册绑定单击事件
            $("#subdate").click(function () {
            // 获取用户名输入框里的的内容
                // 【用户名密码由5-12位字母数字表达式构成】
                 var username = $("#username").val();
                 var usercode1 = $("#usercode1").val();
                 var usercode2 = $("#usercode2").val();
                 //【邮箱符合xxxx@xxxx.com格式】
                var postbox = $("#postbox");
                //【真实姓名由字母构成】
                var name = $("#name");
                //【身份证号由数字构成】
                var id = $("#ID");
            // 创建正则表达式
                var c_user=/^\w{5,16}$/;
                var c_name=/^[a-z]{3,16}$/;
                var c_id=/^[0-9]+$/;
                var c_pb=/^(\w+)[@](\w+)(.com)$/;
                var p=true;
            // test验证
            // 提示
                if(!c_pb.test($("#postbox").val()))
                {
                    $("#postbox").next().show();
                    p=false;
                }
                if(!c_user.test($("#username").val())){
                    $("#username").next().show();
                    p=false;
                }
                if(!c_user.test($("#usercode1").val())){
                    $("#usercode1").next().show();
                    p=false;
                }
                if($("#usercode1").val()!=$("#usercode2").val()){
                    $("#usercode2").next().show();
                    p=false;
                }
                if(!c_id.test($("#ID").val())){
                    $("#ID").next().show();
                    p=false;
                }
                if(!c_name.test($("#name").val())){
                    $("#name").next().show();
                    p=false;
                }
                if(p==true&&$("#existUsername").html()==""){
                    alert("注册成功，请登录");
                }
                return p;
            });
            $("#username,#usercode1,#usercode2,#ID,#name,#postbox").click(function () {
                if($(this).next().is(":visible")){
                    $(this).next().hide();
                    this.value="";
                }
            });
            $("#code_img").click(function () {
               //在事件响应的function函数中有一个this对象，这个this对象，是当前正在响应事件的dom对象
                //src属性表示验证码img标签的图片路径，它可读可写
                this.src="${basePath}kaptcha.jpg?d="+new Date();
                //刷新验证码操作
                //basePath是静态包含那里面以前设置的路径；
                //由于某些浏览器就向服务器获取验证码时会优先调用缓存,导致验证码只会换一次，
                //所以这里添加不同的属性值就可以绕过缓存重新获取
            });
            $("#username").blur(function () {
                //1、获取用户名
                var username = this.value;
                $.getJSON("${pageScope.basePath}US","action=ajaxExistsUsername&username="+username
                    ,function (date) {
                    if(date.existsUsername==true){
                        $("#existUsername").html("用户名已经被占用！！！");
                    }else {
                        $("#existUsername").html("");
                    }
                })
            });
        });

    </script>
</head>
<body>
<form action="US" method="post">
<!--RS是注册页面的servlt程序的配置访问地址，访问的话可以直接在地址的工程名后面直接加RS-->
    <input type="hidden" name="action" value="register">
<h1 style="color: sandybrown" align="center">C⭐注册页面</h1>
<div style="background-color: aqua;width: border-box;height: 760px;">
    <table align="center" border="0" cellspacing="0" width="900"  height="500" style="background-color:deepskyblue">
        <tr>
            <th rowspan="10" style="font-size: 116px;font-family: 楷体;color: yellowgreen" align="center">
                欢迎注册<br>
                C⭐账号
            </th>
            <th colspan="2" style="color: yellowgreen;font-family: 楷体;font-size: 56px">用户注册</th>
        </tr>
        <tr>
            <th>
          <span class="error" id="existUsername">
<%--              <%=request.getAttribute("Error")==null?"":request.getAttribute("Error")%>--%>
                  ${requestScope.Error}
                  <%--
                  这里用EL表达式；empty判断是否为空，属于EL表达式运算。
                  不过对于EL表达式来说空值输出直接就是空，所以这里不用判断
                  --%>
          </span>
            </th>
        </tr>
        <tr>
            <th>用户名：</th>
            <th>
                <input type="text" id="username" name="username">
                <span class="warning">用户名不合法</span>
            </th>
        </tr>
        <tr>
            <th>密码：</th>
            <th>
                <input type="password" id="usercode1" name="password">
                <span class="warning">密码不合法</span>
            </th>
        </tr>
        <tr>
            <th>确认密码：</th>
            <th>
                <input type="password" id="usercode2">
                <span class="warning">两次密码不一样</span>
            </th>
        </tr>
        <tr>
            <th>身份证号：</th>
            <th>
                <input type="text" id="ID" name="user_ID">
                <span class="warning">身份证号不合法</span>
            </th>
        </tr>
        <tr>
            <th>邮箱📫：</th>
            <th>
                <input type="text" id="postbox" name="email">
                <span class="warning">邮箱不合法</span>
            </th>
        </tr>
        <tr>
            <th>真实姓名：</th>
            <th>
                <input type="text" id="name" name="realname">
                <span class="warning">姓名不合法</span>
            </th>
        </tr>
        <tr>
            <th>性别：</th>
            <th>
                <input type="radio" id="sex_man" name="sex" value="boy" checked>男
                &nbsp&nbsp&nbsp&nbsp&nbsp&nbsp
                <input type="radio" id="sex_woman" name="sex" value="girl">女
            </th>
        </tr>
        <tr>
            <th>验证码：</th>
            <th>
                <input type="text" name="userCode" style="width: 80px">
                <img id="code_img" src="kaptcha.jpg" style="width: 90px;height: 26px">
            </th>
        </tr>
        <tr>
            <th style="color: red;size: 6px">
                【用户名密码由5-12位字母数字表达式构成】<br>
                【邮箱符合xxxx@xxxx.com格式】<br>
                【真实姓名由(3-16)位小写字母构成】<br>
                【身份证号由数字构成】<br>
            </th>
            <th>
                <input type="submit" id="subdate" value="注册" style="width: 86px;height: 33px">
            </th>
            <th><a href="pages/UserPages/login.jsp">有账号👉去登录</a></th>
        </tr>
    </table>
</div>
</form>
</body>
</html>